<template>
  <div class="video-modal">
    <div class="video-box">
      <img src="@/assets/home/close-icon.png" class="close" @click="handleClose" />
      <video :src="videoSrc" controls="controls" width="100%" height="100%" controlsList="nodownload" autoplay />
    </div>
  </div>
</template>
<script>
export default {
  props: ['videoSrc'],
  data () {
    return {}
  },
  methods: {
    handleClose () {
      this.$emit('closeVideo', false)
    }
  }
}
</script>
<style lang="less" scoped>
.video-modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  .video-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    height: auto;
    .close {
        position: absolute;
        right: 0;
        top: -30px;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
    }
}
</style>
